<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-08 13:39:48
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-05 16:28:24
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\system\userlog\index.vue
 * @Description: 用户日志
-->

<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import formateDate from '@/utils/formateDate'
import { getAccountlogListPage } from "@/api/system/log/index"

const configList = ref([]);
const showSearch = ref(true);
const total = ref(0);
const queryParams = ref<any>({
  page: 1,
  size: 20,
  nameOrUsername: '',
  startTime: undefined,
  endTime: undefined,
  orderType: 'desc',
  orderBy: 'updatedTime'
})
// 搜索条件组件配置数据
const conditionComponents = ref([
  {
    type: 0,
    key: 'nameOrUsername',
    width: "220px",
    placeholder: '请输入用户姓名或登录账号'
  },
  {
    type: 2,
    key: 'calendar',
    value: '日历',
    width: "220px",
  },
])

// 表头
const columns = ref([
{
  title: '用户姓名',
  minWidth: 120,
  dataIndex: 'accountName',
},
{
  title: '登录账号',
  minWidth: 120,
  dataIndex: 'username',
},
{
  title: '用户角色',
  minWidth: 240,
  dataIndex: 'accountRoleList',
  formatter: (record) => {
    return record.accountRoleList?.map((v: any) => v.roleName).join(',') || '-'
  },
},
{
  title: '登录IP',
  minWidth: 120,
  dataIndex: 'loginIp',
},
{
  title: '登录地点',
  minWidth: 240,
  dataIndex: 'address',
},
{
  title: '登录状态',
  minWidth: 100,
  dataIndex: 'success',
  formatter: (record) => {
    return record.success ? '成功' : '失败'
  },
},
{
  title: '操作信息',
  minWidth: 240,
  dataIndex: 'remark',
},
{
  title: '登录时间',
  minWidth: 150,
  dataIndex: 'updatedTime',
  formatter: (record) => {
    return formateDate(record.updatedTime).format('YYYY.MM.DD HH:mm:ss')
  },
}
])
// 查询列表
const { run: getAccountlogList, loading } = useRequest(getAccountlogListPage, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data) => {
    configList.value = data.content || []
    total.value = data.totalElements
  },
})
onSearch()

// 过滤查询
function onSearch() {
  getAccountlogList(queryParams.value)
}
// 条件过滤
function formSearch(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
    calendar: undefined,
    startTime: params.calendar ? params.calendar[0] + ' 00:00:00' : undefined,
    endTime: params.calendar ? params.calendar[1] + ' 23:59:59' : undefined,
  }
  onSearch()
}
// 分页
function pagetionSerach(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
  }
  onSearch()
}

</script>

<template>
  <div class="app-container">
    <SearchBar :components="conditionComponents" @search="formSearch" class="mb-[16px]" />
    <TableForm
      :auto-height="true"
      :data="configList"
      :columns="columns"
      :tableLoading="loading"
      :total-count="total"
      v-model:showSearch="showSearch"
      :showToolBar="false"
      @refresh="pagetionSerach"
    />
  </div>
</template>